<template>
	<view class="container">
		<!--货品详情.开始-->
		<view class="order-item">
			<view class="goods-box">
				<view class="img-box">
					<image mode="widthFix" :src="$api.loadFile(goodsModel.imgUrl)"></image>
				</view>
				<view class="right">
					<text class="title">{{goodsModel.goodsTitle}}</text>
					<text class="attr">{{goodsModel.skuText}}  x {{goodsModel.quantity}}</text>
					<text class="price">{{goodsModel.realPrice}}</text>
				</view>
			</view>
		</view>
		<!--货品详情.结束-->
		
		<!--退款类型.开始-->
		<view v-if="model.type===0" class="group-box">
			<view class="type-list">
				<view @click="selectType(1)" class="list-box">
					<view class="left">
						<text class="icon iconfont icon-refund"></text>
						<text class="text">我要退款</text>
					</view>
					<view class="right">
						<text class="text">申请退款退货</text>
					</view>
				</view>
				<view @click="selectType(2)" class="list-box">
					<view class="left">
						<text class="icon iconfont icon-deliver"></text>
						<text class="text">我要换货</text>
					</view>
					<view class="right">
						<text class="text">已收到货，需要更换货物</text>
					</view>
				</view>
			</view>
		</view>
		<!--退款类型.结束-->
		
		<view v-if="model.type>0" class="group-box">
			<view class="form-list">
				<view class="list-box block">
					<view class="remark">
						<textarea v-model="model.applyReason" placeholder="请具体描述申请原因" class="textarea"></textarea>
					</view>
				</view>
				<view class="upload-box">
					<view @tap="chooseImage" class="btn-box">
						<text class="icon iconfont icon-add">上传凭证</text>
					</view>
					<view v-for="(item,index) in model.refundAlbums" :key="index" class="img-box">
						<text @click="delImage(index)" class="close iconfont icon-close"></text>
						<image @click="viewImage(index)" mode="widthFix" :src="$api.loadFile(item.thumbPath)"></image>
					</view>
				</view>
			</view>
		</view>
		<view v-if="model.type>0" class="group-box">
			<view class="form-foot">
				<button @click="submitFrom" class="btn submit">提交申请</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsModel: {},
				model: {
					orderId:0,
					type:0,
					applyReason:null,
					refundGoods:[],
					refundAlbums:[]
				}
			}
		},
		methods: {
			//初始化数据
			async initData(id){
				let _this = this;
				//加载订单信息
				await _this.$api.request({
					url: `/account/order/goods/${id}`,
					loading: true
				}).then(res=>{
					//console.log(res.data)
					_this.goodsModel = res.data;
					_this.model.orderId = _this.goodsModel.orderId;
					_this.model.refundGoods.push({
						orderGoodsId: _this.goodsModel.id
					})
				});
			},
			//选择类型
			selectType(val) {
				this.model.type = val;
				let titleTip = '申请售后';
				if(val===1){
					titleTip = '申请退款';
				}else if(val===2){
					titleTip = '申请换货';
				}
				uni.setNavigationBarTitle({
				　　title: titleTip
				});
			},
			//选择上传图片
			chooseImage() {
				var _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择和拍照
					success: async (e) => {
						var tempFilePaths = e.tempFilePaths;
						console.log(tempFilePaths)
						await _this.$api.request({
							url: `/upload?thumb=1&water=1`,
							method: "file",
							data:{
								filePath: tempFilePaths[0]
							},
							load: true
						}).then(res=>{
							const imgList = JSON.parse(res.data);
							_this.model.refundAlbums.push({
								thumbPath: imgList[0].thumbPath[0],
								originalPath: imgList[0].filePath
							});
							//console.log(_this.model.refundAlbums)
						});
					}
				});
			},
			//查看图片
			viewImage(index) {
				let _this = this;
				let urls = _this.model.refundAlbums.map(item=>{
					return _this.$api.loadFile(item.originalPath);
				});
				uni.previewImage({
					urls: urls,
					current: index
				})
			},
			//删除图片
			delImage(index){
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "是否要删除该图片",
					success: (res) => {
						if (res.confirm) {
							_this.model.refundAlbums.splice(index, 1)
						}
					}
				})
			},
			//提交申请
			async submitFrom(){
				let model = this.model;
				//console.log(model)
				if(!model.type){
					this.$api.msg('请选择售后类型');
					return;
				}
				if(!model.applyReason){
					this.$api.msg('请填写申请理由');
					return;
				}
				//提交表单
				await this.$api.request({
					url: `/account/order/refund`,
					method: "post",
					data: model,
					loading: true
				}).then(res=>{
					this.$api.msg('提交申请成功',1500,false,'success');
					setTimeout(()=>{
						uni.navigateBack();
					}, 800);
				});
			}
		},
		//页面初始化
		onLoad(options){
			let id = parseInt(options.id);
			this.initData(id);
		}
	}
</script>

<style lang="scss">
	.order-item{
		display: flex;
		flex-direction: column;
		margin: 24rpx 24rpx 0 24rpx;
		border-radius: 20rpx;
		background: #fff;
		.goods-box{
			display: flex;
			padding: 20rpx 0 20rpx 30rpx;
			border-top: 2rpx solid #f5f5f5;
			.img-box{
				display: flex;
				align-items: center;
				box-sizing: border-box;
				width: 136rpx;
				height: 136rpx;
				border-radius: 20rpx;
				background: #f5f5f5;
				image{
					border-radius: 20rpx;
					width: 100%;
				}
			}
			.right{
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx 0 24rpx;
				overflow: hidden;
				.title{
					font-size: 30rpx;
					color: #333;
					line-height: 1;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.attr{
					color: #999;
					font-size: 26rpx;
					line-height: 1;
					padding: 20rpx 0;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.price{
					color: #333;
					font-size:30rpx;
					line-height: 1;
					&:before{
						content: '￥';
						font-size: 24rpx;
					}
				}
				.btn-box{
					display: flex;
					justify-content: flex-end;
					padding-top: 20rpx;
					.btn{
						margin-left: 12rpx;
						padding: 10rpx 30rpx;
						color: #555;
						font-size: 26rpx;
						line-height: 1;
						border: 1px solid #eee;
						border-radius: 100rpx;
					}
				}
			}
		}
	}
	.type-list{
		border-radius: 20rpx;
		overflow: hidden;
		.list-box{
			display: flex;
			justify-content: space-between;
			padding: 24rpx;
			margin-bottom: 2rpx;
			color: #999;
			font-size: 28rpx;
			line-height: 48rpx;
			background: #fff;
			.left{
				flex-shrink: 0;
				display: flex;
				align-items: center;
				.icon{
					margin-right: 16rpx;
					color: #ee883b;
					font-size: 36rpx;
				}
				.text{
					color: #333;
					font-size: 30rpx;
					font-weight: bold;
					line-height: 1;
				}
			}
			.right{
				flex-grow: 1;
				position: relative;
				box-sizing: border-box;
				padding: 0 28rpx 0 12rpx;
				&::after{
					color: #999;
					font-size: 28rpx !important;
					font-family: "iconfont";
					content: "\e68d";
					position: absolute;
					top: 50%;
					right: 0;
					margin-top: -14rpx;
					width: 28rpx;
					height: 28rpx;
					line-height: 28rpx;
				}
				.text{
					color: #999;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
